<template>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content class="content-area">
      <a-row id="nav" :gutter="20" align="bottom">
        <!-- 头像 -->
        <a-col class="avatar" span="4">
          <img src="../assets/logo.png" alt="avatar" style="width: 100%;" />
        </a-col>
        <!-- 导航 -->
        <a-col class="nav-right" span="20">
          <a-menu mode="horizontal">
            <a-menu-item v-for="route in routes" :key="route.path">
              <router-link :to="route.path">
                {{ route.meta.title }}
              </router-link>
            </a-menu-item>
          </a-menu>
        </a-col>
      </a-row>
    </a-layout-content>
    <router-view></router-view>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const data = reactive({     
        routes: [],
    })
    return { ...toRefs(data) }
  },
  beforeMount() {
    this.routes = this.$router.options.routes
    console.log(this.routes[0])
  },
}
</script>

<style lang="scss" scoped>
.ant-layout {
  background-color: rgb(233, 233, 233);
  .ant-layout-header {
    background-color: rgb(126, 72, 212);
    height: 41px;
  }

  .ant-layout-content.content-area {
    width: 920px;
    margin: 0 auto;
    #nav {
      // background-color: #fff;
      padding: 10px;
      .avatar {
        height: 154px;
        border-radius: 2px;
        border: #fff 3px solid;
      }

      .nav-right {
      }
    }
  }

  .ant-layout-footer {
  }
}
</style>
